#{extends 'master.html' /}
#{set 'title'}
&{'ShoppingCart.display.title'}
#{/set}
<div class="page-header">
    <div>
        <h3 class="scart-title">&{'ShoppingCart.display.header'}</h3>
    </div>
</div>
<div class="page-block">

    #{form @ShoppingCart.update()}
    <table class="shopping-items">
        <thead>
        <tr>
            <th>
                <div class="delete-header"></div>
            </th>

            <th>
                <div>&{'Order.summary.table.titleColumn'}</div>
            </th>
            <th>
                <div>&{'Order.summary.table.quantityColumn'}</div>
            </th>
            <th class="item-price">
                <div>&{'Order.summary.table.unitPriceColumn'}</div>
            </th>
        </tr>
        </thead>
        #{list items:shoppingCart.items, as:'cartitem'}
        <tr>
            <td class="delete-column"><a class="delete-item" title="&{'ShoppingCart.display.removeitem'}"
                                         href="@{ShoppingCart.delete(cartitem.productId)}">&nbsp;</a></td>
            <td><a href="@{Product.display(cartitem.productId)}">${cartitem.title}</a></td>
            <td><input type="text" name="products" value="${cartitem.quantity}"/></td>
            <td class="item-price">${cartitem.subtotal}</td>
        </tr>
        #{/list}
        <tfoot>
        <tr>
            <td colspan="3"><input class="refresh-button" type="submit" name="update" value="&{'ShoppingCart.display.update'}"/></td>
            <td class="cart-total item-price">${shoppingCart.subtotal}</td>
        </tr>
        </tfoot>
    </table>
    <div class="bottom-button">
        <input type="submit" name="completeCheckout" value="&{'ShoppingCart.display.completeCheckout'}" /></div>
    #{/form}
</div>